{% set webRoot = constant('PIMCORE_WEB_ROOT') %}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Pimcore :: Icon list</title>
    <style type="text/css">

        body {
            font-family: Arial;
            font-size: 12px;
        }

        .icons {
            width:1200px;
            margin: 0 auto;
        }

        .icon {
            text-align: center;
            width:100px;
            height:75px;
            margin: 0 10px 20px 0;
            float: left;
            font-size: 10px;
            word-wrap: break-word;
        }

        .icon.black {
            background-color: #0C0F12;
        }

        .icon.black .label {
            color: #fff;
        }

        .info {
            text-align: center;
            margin-bottom: 30px;
            clear: both;
            font-size: 22px;
            padding-top: 50px;
        }

        .info small {
            font-size: 16px;
        }

    </style>
</head>
<body>

<div class="info">
    <a target="_blank">Color Icons</a>
    <br>
    <small>based on the <a href="https://github.com/google/material-design-icons/blob/master/LICENSE" target="_blank">Material Design Icons</a></small>
</div>

<div id="color_icons" class="icons">
    {% for icon in colorIcons %}
        {% set icon = icon|replace({(webRoot): ''}) %}
        <div class="icon">
            <img style="width:50px;" src="{{ icon }}" title="{{ icon|basename }}">
            <div class="label">
                {{ icon in iconsCss  ? '*' : '' }}
                {{ icon|basename }}
            </div>
        </div>
    {% endfor %}
</div>

<div class="info">
    <a target="_blank">White Icons</a>
    <br>
    <small>based on the <a href="https://github.com/google/material-design-icons/blob/master/LICENSE" target="_blank">Material Design Icons</a></small>
</div>

<div id="white_icons" class="icons">
    {% for icon in whiteIcons %}
        {% set icon = icon|replace({(webRoot): ''}) %}
        <div class="icon black">
            <img style="width:50px;" src="{{ icon }}" title="{{ icon|basename }}">
            <div class="label">
                {{ icon in iconsCss  ? '*' : '' }}
                {{ icon|basename }}
            </div>
        </div>
    {% endfor %}
</div>

<div class="info">
    <a href="https://github.com/twitter/twemoji" target="_blank">Source (Twemoji)</a>
</div>

<div id="twemoji" class="icons">
    {% for icon in twemoji %}
        {% set icon = icon|replace({(webRoot): ''}) %}
        <div class="icon">
            <img style="width:50px;" src="{{ icon }}" title="{{ icon|basename }}">
            <div class="label">{{ icon|basename }}</div>
        </div>
    {% endfor %}
</div>

<div class="info">
    Flags
</div>

<table>
    <tr>
        <th>Flag</th>
        <th>Code</th>
        <th>Name</th>
    </tr>
    {% for langOpt in languageOptions %}
        <tr>
            <td><img style="width:16px" src="{{ langOpt['flag'] }}"></td>
            <td>{{ langOpt['language'] }}</td>
            <td>{{ langOpt['display'] }}</td>
        </tr>
    {% endfor %}
</table>


</body>
</html>

